<template>
  <table>
    <tr>
      <th>序号</th>
      <th>名字</th>
      <th>年龄</th>
      <th>头像</th>
    </tr>
    <tr v-for="(item,idx) in list" :key="idx">
      <td>{{idx+1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>
        <!-- slot name具名插槽 
        slot有自定义的属性，向slot传递数据，这个数据在父组件使用插槽时，能自动接收
        -->
        <slot name="img" :girl="item" :loveName="item.name" :img="item.headImgUrl">
          <!-- 默认内容 -->
          <img :src="item.headImgUrl"/>
        </slot>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>